import React, { PureComponent } from "react";
import {
  Row,
  Col,
  Input,
  Button,
  Checkbox,
  Divider,
  Icon,
  notification
} from "antd";
import Req from "../common/Req";

export default class RegistPage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      nickname: "",
      email: "",
      agreeAgreement: false,
      pwdVerification: false,
      verificationPwd: <Icon type="meh-o" />
    };
  }
  render() {
    return (
      <div style={{ height: 400, lineHeight: 3 }}>
        <Row type="flex" justify="center">
          <Col span={6}>
            <Divider />
            <Input
              onChange={e => this.setState({ username: e.target.value })}
              addonBefore="登陆账号"
            />
            <Input
              onChange={e => this.setState({ password: e.target.value })}
              type="password"
              addonBefore="登陆密码"
            />
            <Input
              type="password"
              onChange={e =>
                e.target.value === this.state.password
                  ? this.setState({
                      verificationPwd: <Icon type="smile-o" />,
                      pwdVerification: true
                    })
                  : this.setState({
                      verificationPwd: <Icon type="frown-o" />,
                      pwdVerification: false
                    })
              }
              addonBefore="重复密码"
              addonAfter={this.state.verificationPwd}
            />
            <Input
              onChange={e => this.setState({ nickname: e.target.value })}
              addonBefore="账号昵称"
            />
            <Input
              onChange={e => this.setState({ email: e.target.value })}
              addonBefore="常用邮箱"
            />
            <div>
              <Checkbox
                onChange={e =>
                  this.setState({ agreeAgreement: e.target.checked })
                }
              >
                我同意并遵守
              </Checkbox>
              <a>《不平等条约》</a>
            </div>
            <div style={{ textAlign: "center" }}>
              <Button
                type="primary"
                onClick={() => {
                  if (!this.state.agreeAgreement) {
                    notification["error"]({
                      message: "注册失败",
                      description: "您必须先同意《不平等条约》才能注册。"
                    });
                    return;
                  }
                  if (!this.state.pwdVerification) {
                    notification["error"]({
                      message: "注册失败",
                      description: "您两次填写的密码不一致"
                    });
                    return;
                  }

                  Req(
                    "http://localhost:8080/user/regist",
                    {
                      method: "POST",
                      headers: {
                        "Content-type": "application/json"
                      },
                      body: JSON.stringify(this.state)
                    },
                    this.props.history,
                    resp => {
                      if (resp.code === 100 && resp.data.id)
                        this.props.history.push("/retailers/");
                      else
                        notification["error"]({
                          message: "注册失败",
                          description: "未知原因，请重新注册"
                        });
                    }
                  );
                }}
              >
                注册
              </Button>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}
